<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>月统计</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="container mt-4">
        <h2>月统计</h2>
        
        <div class="row mb-3">
            <div class="col">
                <form class="row g-3" method="get">
                    <div class="col-auto">
                        <input type="month" class="form-control" name="date" 
                               value="${date}" onchange="this.form.submit()">
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <h5>投注总额</h5>
                        <p class="h3 text-primary">${summary.totalBet}</p>
                    </div>
                    <div class="col-md-4">
                        <h5>结果总额</h5>
                        <p class="h3 text-success">${summary.totalResult}</p>
                    </div>
                    <div class="col-md-4">
                        <h5>净收益</h5>
                        <p class="h3 ${summary.netProfit >= 0 ? 'text-success' : 'text-danger'}">
                            ${summary.netProfit}
                        </p>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-md-4">
                        <h5>总场次</h5>
                        <p class="h3">${summary.totalCount}</p>
                    </div>
                    <div class="col-md-4">
                        <h5>获胜场次</h5>
                        <p class="h3 text-success">${summary.winCount}</p>
                    </div>
                    <div class="col-md-4">
                        <h5>胜率</h5>
                        <p class="h3">
                            <fmt:formatNumber value="${summary.winRate}" type="percent" maxFractionDigits="1"/>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card mt-4">
            <div class="card-body">
                <div id="profitChart" style="height: 400px;"></div>
            </div>
        </div>
        
        <div class="mt-3">
            <a href="${pageContext.request.contextPath}/bet/list" class="btn btn-secondary">返回列表</a>
        </div>
    </div>
    
    <script>
    // 初始化图表
    var chartDom = document.getElementById('profitChart');
    var myChart = echarts.init(chartDom);
    
    var option = {
        title: {
            text: '月度盈亏趋势'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ${dates}
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '净收益',
            type: 'line',
            data: ${profits},
            markLine: {
                data: [
                    { type: 'average', name: '平均值' }
                ]
            }
        }]
    };
    
    myChart.setOption(option);
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 